<template>
  <div
    ref="myChart"
    id="maian"
    :style="{ width: '100vw', height: '100vh', backgroundColor: '#fff', borderRadius: '10px',maxWidth:'767px',minWidth:'767px',maxHeight:'360px',minHeight:'360px' }"
  ></div>
</template>

<script setup>
import { onMounted } from "vue";
import { getCurrentInstance } from "vue";

const internalInstance = getCurrentInstance();
const echarts = internalInstance.appContext.config.globalProperties.$echarts;

onMounted(() => {
  const myChart = echarts.init(document.getElementById("maian"));
  const xAxisData = ['1日','2日', '3日', '4日', '5日', '6日', '7日'];
  const randomData = Array.from({ length: 22
   }, () => Math.floor(Math.random() * 40));
  
  const option = {
    title: {
      text: '租金趋势',
      textStyle: {
        fontSize: '16px',
        fontWeight: '700',
        color: '#161615'
      },
      left: '16px',
      top: '16px'
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisTick: {
        show: false, // Remove x-axis tick marks
      },
      axisLine: {
        lineStyle: {
          color: '#eaeaea' // Set x-axis color
        }
      },
      axisLabel: {
        color: '#c6c7cc', // Set x-axis label color
        margin: 16, // Set x-axis label margin
        width: '100%' // Set x-axis label width to fill the entire canvas
      }
    },
    grid: {
      left: '24px',
      right: '16px',
      bottom: '20px',
      containLabel: true
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#c6c7cc', // Set y-axis label color
        margin: 26, // Set y-axis label margin
        formatter: '{value}辆' // Display '辆' after the value
      }
    },
    series: [
      {
        name: 'Direct',
        data: randomData,
        type: 'bar',
        barWidth: '17px', // Set bar width to 12px
        itemStyle: {
          color: '#c7d5ff'
        }
      }
    ]
  };

  option && myChart.setOption(option);
});
</script>